@import 'list-widget';
@import 'topics';

$top-height: 3.2rem;

.study-index {
  .box__top {
    @extend %flex-wrap;

    align-items: start;

    /* flex gutters, waiting for row-gap to be implemented for flexbox.  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items#Creating_gutters_between_items */
    margin: 0 0 -1em -1em;

    > * {
      margin: 0 0 1em 1em;
    }

    /* end of flex gutter hack */

    h1 {
      flex: 3 1 auto;
      margin: 0 0 1rem 0;
    }

    .search {
      flex: 3 1 auto;
      display: flex;

      input {
        @extend %box-radius-left;

        flex: 1 1 100%;
        height: $top-height;
        font-size: 1.1em;

        @include breakpoint($mq-xx-small) {
          font-size: 1.2em;
        }
      }

      .button {
        @extend %box-radius-right;

        padding: 0 1.5em;
        border-left: 0;
      }
    }

    .mselect {
      flex: 1 1 auto;
      font-size: 1.2em;

      &__label::after {
        margin-left: 0.6em;
      }
    }

    .new-study,
    .mselect {
      height: $top-height;
      margin-left: 1rem;
      white-space: nowrap;
    }

    .mselect__label {
      height: 100%;
    }

    .new-study .button {
      height: $top-height;
      padding: 0 1em;

      &::before {
        font-size: 2em;
      }
    }
  }

  .list {
    border-top: $border;
  }

  .nostudies {
    text-align: center;
    margin: 40px 0 80px;
    font-size: 2em;

    p {
      opacity: 0.6;
    }

    i {
      display: block;
      font-size: 180px;
      opacity: 0.4;
    }

    form {
      margin-top: 20px;
    }
  }

  #infscr-loading {
    width: 100%;
  }
}
